/**
 * 拆分出来的切片
 */

import { createSlice } from "@reduxjs/toolkit";

import { add } from "./todosSlice";

const counterSlice = createSlice({
  // 命名空间，触发的动作type会自动添加上这个name，避免动作type重名之后的问题。
  name: "counter",
  // 初始state
  initialState: {
    count: 0,
  },
  /**
   * 配置 reducer 操作，每一个键值对就代表着以往 switch 中的一个 case
   *    key - 最终会是一个动作函数
   *    value - 是一个函数，会收到 state 与 action
   */
  reducers: {
    // key1: value1
    // key2: value2
    increment: function (state, action) {
      // 1. 以往返回全新对象的写法仍然可以去写。
      // return {
      //   count: state.count + 1,
      // };
      // 2. 也可以直接对 state 中的某个属性修改。因为内置了 immer.js 库
      state.count++;
    },
    decrement(state, action) {
      state.count--;
    },
  },
  /**
   * 额外的reducers，可以做一些其它操作
   */
  extraReducers: {
    [add](state, action) {
      // console.log("todos add了", state, action);
      state.count++;
    },
  },
});

// console.log(counterSlice); {reducer, actions}
// counterSlice.actions 中的每一项都是一个 动作创建函数(action creator)
// console.log(counterSlice.actions.increment()); // {type: 'counter/increment', payload: undefined}

// 导出 action creator
export const { increment, decrement } = counterSlice.actions;

// 最主要的默认导出 counterSlice.reducer
export default counterSlice.reducer;
